<template>
  <div class="footer_bg">
    <div class="center">
      <el-row>
        <el-col :span="4">
          <ul class="footer-list">
            <li><a href="#">购物流程</a></li>
            <li><a href="#">支付方式</a></li>
            <li><a href="#">配送方式</a></li>
            <li><a href="#">售后服务</a></li>
            <li><a href="#">常见问题</a></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <ul class="footer-list">
            <li><a href="#">客服中心</a></li>
            <li><a href="#">维修服务</a></li>
            <li><a href="#">退换货政策</a></li>
            <li><a href="#">投诉建议</a></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <ul class="footer-list">
            <li><a href="#">公司简介</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <ul class="footer-list">
            <li><a href="#">微信公众号</a></li>
            <li><a href="#">新浪微博</a></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <ul class="footer-list">
            <li><a href="#">法律声明</a></li>
            <li><a href="#">网站地图</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">优惠活动</a></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <ul class="footer-list">
            <li><a href="#">各种商城</a> </li>
            <li><a href="#">各种商城</a> </li>
            <li><a href="#">各种商城</a> </li>
            <li><a href="#">各种商城</a> </li>
            <li><a href="#">各种商城</a> </li>
            <li><a href="#">各种商城</a> </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="footer-content">
    <div class="contact-info">
      <h3>联系我们</h3>
      <p>QQ：211-983-4329</p>
      <p>邮箱：yq200322@163.com</p>
    </div>
    <div class="social-media">
      <h3>关注我们</h3>
      <el-link
          type="primary"
          @click="goToLink('#')"
      ><el-icon><ChatRound /></el-icon>
      </el-link>
    </div>
  </div>
  <div class="copyright">
    <p>© 2024 Feel-Online-Mall. 保留所有权利.</p>
  </div>
</template>

<script setup>
const goToLink = (link) => {
  window.open(link, '_blank');
}
</script>

<style scoped>
.footer_bg {
  padding-top: 20px;
}

.footer-list {
  list-style: none;
  padding: 0;
  line-height: 2.5;
}

ul li {
  text-align: center;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
}

ul li a {
  color: #AAA;
}

ul li a:hover {
  color: #FF6F61;
}

.copy {
  text-align: center;
}


.footer-content {
  color: #AAAAAA;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.contact-info,
.social-media {
  flex: 1;
}
.copyright {
  font-size: 14px;
  color: #AAA;
}

</style>